<template>
	<view class="detail">
		<view class="header">
			<text class="headerText active">商品</text>
			<text class="headerText">详情</text>
			<text class="headerText">评价</text>
		</view>
		<scroll-view class="scroll" scroll-y="true" enable-flex >
			<view class="petImg">
				<image class="image" :src="detailInfo.photo"></image>
			</view>
			<view class="price">
				<view class="priceLeft">
					<view class="nowPrice">
						<text class="nowPriceNum">￥{{detailInfo.sale_price}}</text>
						<text class="nowPriceText">潮礼抢先囤</text>
					</view>
					<view class="oldPrice">价格
						<text class="delLine">{{detailInfo.market_price}}</text>
					</view>
				</view>
				<view class="priceRight">
					<view class="priceRightUp">
						距离结束仅剩2天
					</view>
					<view class="priceRightDown">
						<text class="time">08</text>:
						<text class="time">50</text>:
						<text class="time">10</text>
					</view>
				</view>
			</view>
			<view class="title">{{detailInfo.presubject}}</view>
			<view class="icon">
				<view class="iconItem">
					<image class="iconImg" src="../../static/images/qualityassurance.png" mode=""></image>
					<text class="iconText">正品保证</text>
				</view>
				<view class="iconItem">
					<image class="iconImg" src="../../static/images/freeshipping.png" mode=""></image>
					<text class="iconText">99元包邮</text>
				</view>
				<view class="iconItem">
					<image class="iconImg" src="../../static/images/thirtydays.png" mode=""></image>
					<text class="iconText">30天退货</text>
				</view>
			</view>
		</scroll-view>
		<view class="footer">
			<view class="footerItem">
				<view class="toCart">
					<image class="iconA" src="../../static/images/start.png" mode=""></image>
					<view class="iconName">收藏</view>
				</view>
				<view class="toCart" @click="toCart" >
					<image class="iconA" src="../../static/images/addCart.png" mode=""></image>
					<view class="iconName">购物车</view>
				</view>
			</view>
			<view class="addCart" @click="addCart">加入购物车</view>
		</view>
	</view>
</template>

<script>
	import { mapGetters } from "vuex"
	export default {
		data() {
			return {
				detailInfo:{}
			};
		},
		// 存储方案取数据
		beforeMount() {
			this.detailInfo = wx.getStorageSync('detailInfo_key')
		},
		computed:{
			...mapGetters(['cartList']),
		},
		methods:{
			toCart(){
				wx.reLaunch({
					url:'/pages/cart/cart'
				})
			},
			// 点击添加购物车
			addCart(){
				// 首先要判断购物车列表中是否存在当前这个商品相关的购物车数据
				let obj = this.cartList.find(item => item.id === this.detailInfo.gid)
				if(obj){
					// 如果有 则直接修改数量
					obj.num++
					obj.isChecked = true
				}else{
					// 如果没有，需要把当前这个页面详情数据变成购物车数据，添加到购物车列表
					obj = this.detailInfo
					this.$set(obj,'num',1)
					this.$set(obj,'isChecked',true)
					this.cartList.push(obj)
				}
				wx.reLaunch({
					url:'../cart/cart'
				})
			}
		}
	}
</script>

<style lang="stylus">
	.detail
		display flex
		flex-direction column
		align-items center
		width 100%
		.header
			display flex
			justify-content center
			width 100%
			height 100rpx
			background-color #FFFFFF
			border-bottom 1rpx solid #d8d8d8
			box-sizing border-box
			.headerText 
				display inline-block
				width 80rpx
				height 100rpx
				font-size 36rpx
				line-height 100rpx
				&.active
					border-bottom 1rpx solid red
					box-sizing border-box
		.scroll
			width 100%
			height calc(100vh - 100rpx )
			.petImg
				display flex
				align-items center
				justify-content center
				width 100%
				height 828rpx
				.image
					width 828rpx
					height 828rpx
			.price
				display flex
				flex-direction row
				justify-content space-between
				width 100%
				height 130rpx
				.priceLeft
					display flex
					flex-direction column
					align-items center
					justify-content center
					width 60%
					height 130rpx
					background-color #202022
					.nowPrice
						height 50rpx
						width 400rpx
						// background-color #007AFF
						.nowPriceNum
							font-size 32rpx
							color #E6B686
						.nowPriceText
							display inline-block
							margin-left 20rpx
							color #FFFFFF
							font-size 28rpx
					.oldPrice
						height 40rpx
						width 400rpx
						color #FFFFFF
						font-size 28rpx
						line-height 40rpx
						// background-color #41C856
						.delLine
							color #FFFFFF
							line-height 40rpx
							text-decoration line-through
				.priceRight
					display flex
					flex-direction column
					align-items center
					justify-content center
					width 40%
					height 130rpx
					background-color #E3A865
					.priceRightUp
						width 250rpx
						height 40rpx
						font-size 28rpx
						text-align center
						// background-color #007AFF
					.priceRightDown
						display flex
						flex-direction row
						align-items center
						justify-content center
						width 250rpx
						height 60rpx
						// background-color #aaaaff
						.time
							display inline-block
							width 50rpx
							height 60rpx
							text-align center
							line-height 60rpx
							border-radius 10rpx
							background-color #FFFFFF
			.title
				margin 10rpx
				font-size 28rpx
			.icon
				display flex
				flex-direction row
				align-items center
				justify-content center
				width 100%
				height 82rpx
				// background-color #4CD964
				.iconItem
					display flex
					flex-direction row
					align-items center
					justify-content center
					width 30%
					height 50rpx
					margin-left 20rpx
					// background-color #007AFF
					.iconImg
						width 40rpx
						height 40rpx
					.iconText
						display inline-block
						margin-left 10rpx
						height 50rpx
						line-height 50rpx
						font-size 28rpx
					
		.footer
			display flex
			flex-direction row
			align-items center
			justify-content center
			width 100%
			height 100rpx
			// background-color red
			border-top 1rpx solid #999999
			.footerItem
				display flex
				flex-direction row
				align-items center
				width 50%
				height 100rpx
				.toCart
					display flex
					flex-direction column
					align-items center
					width 200rpx
					height 100rpx
					.iconA
						margin-top 10rpx
						width 40rpx
						height 40rpx
					.iconName
						color #767676
						font-size 28rpx
			.addCart
				width 50%
				height 100rpx
				background-color #F03E3E
				text-align center
				line-height 100rpx
				color #FFFFFF
				
			
</style>
